<!-- 游戏管理 -->
<template>
  <el-dialog v-if="props.show" :model-value="props.show" title="游戏配置" :close-on-click-modal="false"
    :close-on-press-escape="false" top="12vh" @close="onHideDetails">
    <div v-loading="indexStore.moduleLoading">
      <div class="padding20" :class="props.isDisableUser ? 'disableUser' : ''">
        <el-form ref="ruleFormRef" :model="data.formParams" :inline="true" :rules="rules" :scroll-to-error="true">
          <form-item title="游戏ID" :pass="true" value="game_id">
            <el-input-number :min="0" :max="9999999999999999" :precision="0" v-model="data.formParams.game_id"
              placeholder="请输入游戏ID" clearable controls-position="right"
              :disabled="props.checkedItem.game_id ? true : false" />
          </form-item>
          <form-item title="游戏名称(Chinese)" :pass="true" value="game_name">
            <el-input class="width240" type="text" v-model="data.formParams.game_name" placeholder="请输入(Chinese)游戏名称"
              clearable />
          </form-item>
          <form-item title="游戏名称(English)" :pass="true" value="game_name_en">
            <el-input class="width240" type="text" v-model="data.formParams.game_name_en" placeholder="请输入(English)游戏名称"
              clearable />
          </form-item>
          <form-item title="游戏类型" value="game_type">
            <el-select v-model="data.formParams.game_type" placeholder="请选择" filterable>
              <el-option v-for="item in GAMETYPE" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </form-item>
          <form-item title="游戏品牌" value="platform">
            <el-select v-model="data.formParams.platform" placeholder="请选择" filterable>
              <el-option v-for="item in GameBrand" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </form-item>
          <form-item title="后台并入显示的品牌" value="platform_backend_echo">
            <el-select v-model="data.formParams.platform_backend_echo" placeholder="请选择" filterable>
              <el-option v-for="item in GameBrandNum" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </form-item>
          <form-item title="游戏所属" value="game_source">
            <el-radio-group v-model="data.formParams.game_source">
              <el-radio-button label="自有" :value="0" />
              <el-radio-button label="第三方" :value="1" />
            </el-radio-group>
          </form-item>
          <form-item title="游戏状态" value="status">
            <el-radio-group v-model="data.formParams.status">
              <el-radio-button v-for="item in DEMOPLAY" :key="item.value" :label="item.label" :value="item.value" />
            </el-radio-group>
          </form-item>
          <form-item title="GameUrl" value="game_url" :pass="true">
            <el-input class="imWidth100" type="text" v-model="data.formParams.game_url" placeholder="请输入GameUrl"
              clearable />
          </form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button type="info" @click="onHideDetails">取 消</el-button>
        <el-button type="primary" @click="gameSet(ruleFormRef)" v-loading="indexStore.moduleLoading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { GAMETYPE, DEMOPLAY, GameBrand, GameBrandNum } from '@/config/eunm'
import { addGame, editGame } from '@/api/game'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => props.checkedItem,
  async (value) => {
    if (value) {
      data.formParams = value as any
    }
  },
)

const data = reactive({
  formParams: {
    id: 0,
    game_id: 0,
    game_type: 1,
    platform: '2',
    platform_backend_echo: 2,
    show: 1,
    game_name: '',
    game_name_en: '',
    agent_id: 0,
    game_url: '',
    status: 1,
    game_source: 0,
  },
})

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof data.formParams>>({
  game_id: [{ required: true, message: '请输入游戏ID', trigger: 'blur' }],
  game_name: [{ required: true, message: '请输入中文(Chinese)名称', trigger: 'blur' }],
  game_name_en: [{ required: true, message: '请输入英文(English)名称', trigger: 'blur' }],
  game_url: [{ required: true, message: '请输入GameUrl', trigger: 'blur' }],
})

const gameSet = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (!data.formParams.game_id) {
        return ElMessage.error('请输入游戏ID')
      }
      props.checkedItem.game_id ? await editGame(data.formParams) : await addGame(data.formParams);
      indexStore.getGame() //游戏汇总
      if (props.checkedItem.game_id) {
        ElMessage.success('修改成功')
      } else {
        ElMessage.success('新增成功')
      }
      emit('onHideDetails', true)
    }
  })
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>

<style scoped lang="scss"></style>
